<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <span
          class="logo-lg"
          style="float: left; font-size: 20px; color: white; margin-left: 200px"
        >
          OA数字化管理系统</span
        >
        <router-link to="/Test">111111111</router-link>
        <span style="float: left; margin-left: 60px; font-size: 17px">
          <span @click="getMenu(1)">
            <router-link to="/Personneldesk">
              <span class="nav_top"
                ><el-button type="text" style="color: #fff"
                  >工作台</el-button
                ></span
              >
            </router-link>
          </span>
          <span v-for="(item, index) in menuData2" :key="index">
            <span v-if="item.id != 1">
              <span class="nav_top">
                <el-dropdown trigger="click" placement="top-end">
                  <span class="el-dropdown-link">
                    {{ item.name
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="newDrop">
                    <span
                      v-for="(item2, index1) in item.children"
                      :key="index1"
                    >
                      <span @click="getMenu(item2.id)">
                        <router-link v-if="item2.url != null" :to="item2.url">
                          <span v-if="item2.url != ''">
                            <el-dropdown-item
                              ><i :class="item2.icon" style="color: #409eff"></i
                              ><span>{{ item2.name }}</span></el-dropdown-item
                            >
                          </span>
                        </router-link>
                      </span>
                    </span>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </span>
          </span>
        </span>
        <span style="">
          <el-dropdown trigger="click" placement="top-end">
            <i class="el-icon-setting" style="margin-right: 15px"></i>

            <el-dropdown-menu slot="dropdown" class="newDrop">
              <router-link to="/operationlog">
              <span @click="getMenu(147)">
                <el-dropdown-item>查看</el-dropdown-item>
              </span>
            </router-link>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            router
            :collapse="isCollapse"
          >
            <span v-for="(item, index) in menuData" :key="index">
              <span v-if="item.url != ''">
                <span v-if="item.children == null">
                  <el-menu-item :index="item.url">
                    <i :class="item.icon"></i>
                    <span slot="title" style="margin-left: 10px">{{
                      item.name
                    }}</span>
                  </el-menu-item>
                </span>
              </span>
              <span v-if="item.children != null">
                <el-submenu :index="item.sort.toString()">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span style="margin-left: 10px">{{ item.name }}</span>
                  </template>
                  <el-menu-item-group>
                    <span
                      v-for="(item2, index1) in item.children"
                      :key="item.sort + '-' + index1"
                    >
                      <el-menu-item :index="item2.url">{{
                        item2.name + 11
                      }}</el-menu-item>
                    </span>
                  </el-menu-item-group>
                </el-submenu>
              </span>
            </span>
          </el-menu>
        </el-aside>

        <el-main style="background-color: #f4f4f4">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getToken, setToken, removeToken } from "@/utils/auth";
import axios from "axios";

export default {
  nameL: "show",
  data() {
    return {
      value: "",
      chartInstance: null,
      isCollapse: false,
      menuData: [],
      menuData2: [],
      menuItem:JSON.parse(localStorage.getItem("menuItem")),
    };
  },
  created() {
    // console.log(getToken());
    // 获取菜单信息
    this.getMenu(this.menuItem);
    // 获取菜单头
    this.getMenu(0);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getMenu(id) {
      // console.log(id)
      if (id != 0) {
        localStorage.setItem("menuItem",id)
        axios.post("/menu/queryMenuById?id=" + id).then((res) => {
          if (res.data.code == 200) {
            this.menuData = res.data.data;
            console.log("菜单数据获取成功");
          } else {
            this.$message.error("菜单数据获取失败");
          }
        });
      } else {
        axios.post("/menu/queryMenuById?id=" + id).then((res) => {
          if (res.data.code == 200) {
            this.menuData2 = res.data.data;
            console.log("数据获取成功");
          } else {
            this.$message.error("菜单数据获取失败");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item.is-active {
  background-color: #e7f4ff !important;
  color: #1890ff;
}
.el-menu-item.is-active span {
  color: #000 !important;
}
.el-header {
  background-color: #232b40;
  color: #fff;
  position: relative;
  width: 100%;
  height: 60px;
}

.el-header,
.el-footer {
  background-color: #232b40;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  color: #fff;
  text-align: center;
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
}
.nav_top {
  margin-left: 40px;
}
.newDrop {
  top: 50px !important;
}
.el-dropdown-link {
  color: #fff;
}
.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow: scroll;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
.nav2_top {
  width: 200px;
  height: 20px;
  border: 1px solid red;
  float: left;
}
</style>
